<template>
  <div>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      :offset="100"
      @load="throttle(onLoad, 1000)()"
    >
      <!-- 回答简介 -->
      <van-cell
        v-for="answer in SectionList"
        :key="answer.id"
        @click="toDetail(answer.id)"
      >
        <template #title> {{ answer.title }} </template>
        <template #value>
          <van-image width="75" height="75" :src="answer.images[0]" />
        </template>
        <template #label> {{ answer.display_date }} </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { throttle } from '@/utils/throttle'
export default {
  name: 'SectionList',
  props: {
    SectionList: {
      type: Array,
    },
  },
  setup(props, context) {
    const $router = useRouter()

    let state = reactive({
      loading: false,
      finished: false,
    })

    // 下滑时获取更多的回答, 节流,防止滚动过快获取重复的数据
    const onLoad = () => {
      // 开始加载
      state.loading = true
      // 通知父组件获取更多的回答数据
      context.emit('moreSection')
      // 结束加载
      state.loading = false
    }

    // 跳转到回答详情页面
    const toDetail = (id) => {
      $router.push({
        name: 'detail',
        params: { id },
      })
    }

    return {
      ...toRefs(state),
      onLoad,
      toDetail,
      throttle
    }
  },
}
</script>

<style lang='less' scoped>
/deep/ .van-cell__title {
  flex: 4;
  font-size: 14px;
  font-weight: 700;
}
/deep/ .van-cell__label {
  margin-top: 8px;
  font-weight: normal;
}
.list-head {
  display: flex;
  justify-content: center;
  padding: 10px 0 10px 15px;
  &-time {
    margin-top: 20px;
    padding-right: 10px;
    font-size: 14px;
  }
  hr {
    flex: 1;
    color: #eee;
  }
}
</style>